<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Language" content="en"/>
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#4188c9">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <title>新增博客</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
    <link href="/static/assets/editor/css/style.css" rel="stylesheet"/>
    <link href="/static/assets/editor/css/editormd.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/static/assets/editor/lib/codemirror/codemirror.min.css"/>
    <link href="/static/assets/css/dashboard.css" rel="stylesheet"/>
</head>
<body class="">
<div class="page">
    <div class="flex-fill">
        <div th:replace="public/menu :: menu(1)"></div>
        <div class="my-3 my-md-5">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3">
                        <h3 class="mb-4"><p class="lh-1">文章</p></h3>
                        <div>
                            <div class="list-group list-group-transparent mb-0">
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center active" th:href="@{/admin/article}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
                                    </span>新增文章
                                </a>
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/article/publish}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                                    </span>已发布
                                </a>
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/article/draft}">
									<span class="icon mr-3">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
									</span>草稿箱
                                </a>
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/article/trash}">
                                    <span class="icon mr-3">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                                    </span>回收箱
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="card">
                            <div class="card-body">
                                <form id="postForm" method="post">
                                    <div class="form-group">
                                        <div class="row align-items-center">
                                            <label class="col-sm-1">标题:</label>
                                            <div class="col-sm-11">
                                                <input type="text" class="form-control" name="title" id="title">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row align-items-center">
                                            <label class="col-sm-1">标签</label>
                                            <div class="col-sm-11">
                                                <input type="text" class="form-control" name="tag">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="editor"></div>
                                    <!--html内容-->
                                    <input type="hidden" name="html" id="html">
                                    <!--markdown内容-->
                                    <input type="hidden" name="markdown" id="markdown">
                                    <!--状态，默认公开-->
                                    <input type="hidden" name="state" id="state" value="1">
                                    <div class="btn-list mt-4 text-right">
                                        <button type="button" class="btn btn-outline-primary" onclick="javascript:$('#mdFile').click()"><i class="fe fe-upload"></i>导入markdown文件</button>
                                        <input id="mdFile" type="file" style="display: none;" accept="text/markdown" onchange="loadMdFile()">
                                        <button type="button" class="btn btn-secondary btn-space" onclick="saveDraft()">存草稿</button>
                                        <button type="button" class="btn btn-info btn-space" onclick="previewArticle()">预览</button>
                                        <button type="button" class="btn btn-primary btn-space" onclick="postArticle()">&nbsp;&nbsp;&nbsp;发布&nbsp;&nbsp;&nbsp;</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="admin/dashboard :: footer"></div>
</div>
<script src="/static/assets/js/require.min.js"></script>
<script src="/static/assets/js/dashboard.js"></script>
<script>
    requirejs.config({
        baseUrl: '/static/assets/editor/',
        paths: {
            jquery: "/static/assets/editor/js/jquery.min",
            marked: "/static/assets/editor/lib/marked.min",
            prettify: "/static/assets/editor/lib/prettify.min",
            raphael: "/static/assets/editor/lib/raphael.min",
            underscore: "/static/assets/editor/lib/underscore.min",
            flowchart: "/static/assets/editor/lib/flowchart.min",
            jqueryflowchart: "/static/assets/editor/lib/jquery.flowchart.min",
            sequenceDiagram: "/static/assets/editor/lib/sequence-diagram.min",
            katex: "//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min",
            editormd: "/static/assets/editor/js/editormd.amd" // Using Editor.md amd version for Require.js
        }
    });
    var deps = [
        "editormd",
        "/static/assets/editor/languages/en.js",
        "/static/assets/editor/plugins/link-dialog/link-dialog.js",
        "/static/assets/editor/plugins/reference-link-dialog/reference-link-dialog.js",
        "/static/assets/editor/plugins/image-dialog/image-dialog.js",
        "/static/assets/editor/plugins/code-block-dialog/code-block-dialog.js",
        "/static/assets/editor/plugins/table-dialog/table-dialog.js",
        "/static/assets/editor/plugins/emoji-dialog/emoji-dialog.js",
        "/static/assets/editor/plugins/goto-line-dialog/goto-line-dialog.js",
        "/static/assets/editor/plugins/help-dialog/help-dialog.js",
        "/static/assets/editor/plugins/html-entities-dialog/html-entities-dialog.js",
        "/static/assets/editor/plugins/preformatted-text-dialog/preformatted-text-dialog.js"
    ];
    var editor;

    var md = "## 1.1. 概念\n" +
        "\n" +
        "> **`index`\t索引.\t类比数据库**\n" +
        ">\n" +
        "> **`Type`\t类型.\t类比表, 保存同类型数据的区域**\n" +
        ">\n" +
        "> **`document`\t文档.\t类比表中的一条数据, 每条数据都是一个文档**\n" +
        ">\n" +
        "> **`field`\t字段.\t文档中包含的字段. 类比表中的列**";
    require(deps, function (editormd) {

        editormd.loadCSS("/static/assets/editor/lib/codemirror/addon/fold/foldgutter");

        $(function () {
            editor = editormd("editor", {
                width: "100%",
                height: 540,
                path: '/static/assets/editor/lib/',
                theme: "light",
                previewTheme: "light",
                editorTheme: "xq-light",
                markdown: md,
                codeFold: true,
                saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
                searchReplace: true,
                htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
                toolbar: false,             //关闭工具栏
                emoji: true,
                taskList: true,
                tocm: true,         // Using [TOCM]
                tex: true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart: true,             // 开启流程图支持，默认关闭
                sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "./php/upload.php",
                onload: function () {
                    console.log('onload', this);
                }
            })
        })
    })
    function postArticle() {
        let title = $("#title").val();
        if (title == null || title == '') {
            $("#title").val("[[${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd HH:mm:ss')}]]");
        }
        $("#html").val(editor.getHTML());
        $("#markdown").val(editor.getMarkdown());
        $("#postForm").attr('action', '/admin/article');
        $("#postForm").submit();
    }

    function previewArticle() {
        let title = $("#title").val();
        if (title == null || title == '') {
            $("#title").val("[[${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')}]]");
        }
        $("#html").val(editor.getHTML());
        $("#markdown").val(editor.getMarkdown());
        $("#postForm").attr('action', '/admin/article/preview');
        $("#postForm").submit();
    }

    function saveDraft() {
        let title = $("#title").val();
        if (title == null || title == '') {
            $("#title").val("[[${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd HH:mm:ss')}]]");
        }
        let $postForm = $("#postForm");
        $("#html").val(editor.getHTML());
        $("#markdown").val(editor.getMarkdown());
        $("#state").val(3);
        $postForm.attr('action', '/admin/article');
        $postForm.submit();
    }
    function loadMdFile() {
        let mdFile = document.getElementById("mdFile").files[0];
        let name = mdFile.name;
        let extName = name.substring(name.lastIndexOf("."));

        if (extName != '.md') {
            alert("只支持md格式的文件");
        }

        let formData = new FormData();
        formData.append("file", mdFile);

        $.ajax({
            type: "post",
            url: "/admin/article/file",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.code == 200) {
                    $("#title").val(data.file.title);
                    editor.setMarkdown(data.file.markdown);
                } else {
                    alert("读取文件失败");
                }
            },
            error: function () {
                alert("读取文件失败");
            }
        })
    }
</script>
</body>
</html>
